<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs v-model="prodActiveTabName" type="border-card">
      <el-tab-pane label="商品列表" :name="prodTabNameList.prodList">
        <prod-list v-if="prodActiveTabName===prodTabNameList.prodList" key="k1"></prod-list>
      </el-tab-pane>
      <el-tab-pane label="商品详请" lazy :disabled="!prodCurrentSpu" :name="prodTabNameList.prodDetails">
        <prod-details v-if="prodActiveTabName===prodTabNameList.prodDetails" key="k2"></prod-details>
      </el-tab-pane>
      <el-tab-pane label="添加商品SPU" :name="prodTabNameList.prodSpuAdd">
        <prod-spu-add v-if="prodActiveTabName===prodTabNameList.prodSpuAdd" key="k3"></prod-spu-add>
      </el-tab-pane>
      <el-tab-pane label="修改货品" lazy :name="prodTabNameList.prodSkuModify">
        <prod-sku-modify v-if="prodActiveTabName===prodTabNameList.prodSkuModify" key="k3"></prod-sku-modify>
      </el-tab-pane>
      <el-tab-pane label="添加商品SKU" :name="prodTabNameList.prodSkuAdd" lazy :disabled="!prodCurrentSpu">
        <prod-sku-add v-if="prodActiveTabName===prodTabNameList.prodSkuAdd" key="k4"></prod-sku-add>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>

  import {readyCatesFunction,readyImageServerFunction,readyOssServerFunction} from '../../funcs/commons'
  import {prodTabNameList} from "../../config/variable";
  import {mapState,mapMutations} from 'vuex';
  import ProdList from "./ProdList";
  import ProdDetails from "./ProdDetails";
  import ProdSpuAdd from "./ProdSpuAdd";
  import ProdSkuAdd from "./ProdSkuAdd";
  import ProdSkuModify from "./ProdSkuModify";
  export default {
    name: "Products",
    components: {ProdSkuModify, ProdSkuAdd, ProdSpuAdd, ProdDetails, ProdList},
    data() {
      return {
        prodTabNameList:prodTabNameList
      }
    },

    computed: {
      ...mapState({
        ossServer:state=>state.prod.ossServer,
        imageServer: state=>state.prod.imageServer,
        prodCates: state=>state.prod.prodCates,
        prodCurrentSpu: state=>state.prod.prodCurrentSpu
      }),

      prodActiveTabName:{
        get:function () {
          return this.$store.state.prod.prodActiveTabName;
        },

        set:function (val) {
          this.$store.commit('setProdActiveTabName',val);
        }
      }
    },

    created() {
      //准备好Oss服务器地址
      readyOssServerFunction();
      //准备好图片服务器地址
      readyImageServerFunction();
      //准备好分类数据
      readyCatesFunction();
      //设置显示SPU列表选项卡
      this.prodActiveTabName = prodTabNameList.prodList;
    },

    methods: {
      ...mapMutations(['setProdActiveTabName'])
    }
  }
</script>

<style scoped>

</style>
